<template>
  <div class="exam-detail">
    <van-cell-group v-if="form.shankSex" class="mb10">
      <template #title>
        <div class=" cell-head">腿围测试</div>
      </template>
      <van-cell size="large" title="性别">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #right-icon>
          <van-radio-group :value="form.shankSex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-field
        :value="form.shankNum"
        size="large"
        type="number"
        label="腿围"
        readonly
        maxlength="6"
        placeholder="请输入腿围"
      />
    </van-cell-group>
    <van-cell-group v-if="quest.length" class="mb10">
      <template #title>
        <div class=" cell-head">SARC-F量表测试</div>
      </template>
      <g-question
        :value="quest[0]"
        title="举起或搬运约4.5kg重物的难度"
        :options="options1"
      />
      <g-question
        :value="quest[1]"
        title="步行穿越房间的难度"
        :options="options2"
      />
      <g-question
        :value="quest[2]"
        title="从床或座椅站起的难度"
        :options="options3"
      />
      <g-question
        :value="quest[3]"
        title="攀爬10级台阶的难度"
        :options="options4"
      />
      <g-question
        :value="quest[4]"
        title="过去1年中跌倒的次数"
        :options="options5"
      />
    </van-cell-group>
    <van-cell-group v-if="form.gripSex" class="mb10" title="握力评估">
      <template #title>
        <div class=" cell-head">握力评估</div>
      </template>
      <van-cell size="large" title="性别">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #right-icon>
          <van-radio-group :value="form.gripSex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-field
        :value="form.gripNum"
        size="large"
        type="number"
        label="握力"
        maxlength="6"
        readonly
        placeholder="请输入握力"
      />
    </van-cell-group>
    <van-cell-group v-if="form.sitNum" class="mb20" title="5次起坐试验">
      <template #title>
        <div class=" cell-head">5次起坐试验</div>
      </template>
      <van-field
        :value="form.sitNum"
        type="number"
        label="平均用时"
        maxlength="6"
        readonly
        placeholder="请输入起坐平均用时"
      />
    </van-cell-group>
    <van-cell-group class="pb40">
      <template #title>
        <div class=" cell-head">测评结论</div>
      </template>

      <van-notice-bar
        wrapable
        color="#1989fa"
        background="#ecf9ff"
        left-icon="info-o"
      >
        <div class="xxl result">{{ form.result }}</div>
      </van-notice-bar>
    </van-cell-group>
  </div>
</template>

<script>
function createOption(type = 0) {
  const ret = [
    { label: "没有难度", value: 0 },
    { label: "有一定难度", value: 1 },
    { label: "难度较大或无法完成", value: 2 }
  ];
  if (type == 1) {
    ret[2] = { label: "难度较大、需要器具或他人帮助", value: 2 };
  }
  return ret;
}
import {
  Button,
  Icon,
  NoticeBar,
  Cell,
  CellGroup,
  RadioGroup,
  Radio,
  Field
} from "vant";
import GQuestion from "@/components/Question.vue";
import { Collapse, CollapseItem } from "vant";
import { getExam } from "./api";
export default {
  components: {
    GQuestion,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [NoticeBar.name]: NoticeBar,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Field.name]: Field
  },
  data() {
    return {
      quest: [],
      activeName: 1,
      options1: createOption(),
      options2: createOption(1),
      options3: createOption(1),
      options4: createOption(),
      options5: [
        { label: "0次", value: 0 },
        { label: "1-3次", value: 1 },
        { label: "4次以上", value: 2 }
      ],
      form: {
        gripNum: "",
        gripSex: "",
        sarcParam: "",
        shankNum: "",
        shankSex: "",
        sitNum: "",
        result: ""
      }
    };
  },
  computed: {},
  onLoad(options) {
    this.getDetail(options.id);
  },
  methods: {
    async getDetail(id) {
      const data = await getExam(id);
      this.quest = data.sarcParam
        ? data.sarcParam.split(",").map(e => e * 1)
        : [];
      console.log(this.quest);
      this.form = data;
    }
  }
};
</script>
<style lang="less">
.van-cell-group__title {
  padding: 0;
}
.exam-detail .g-question {
  padding: 40rpx;
}
.exam-detail .g-question .van-cell-group__title {
  font-weight: bold;
  margin-bottom: 20rpx;
}
.pb40 {
  padding-bottom: 160px;
}
.result {
  line-height: 2;
}
.cell-head {
  font-size: 36px;
  font-family: @font-medium;
  font-weight: 500;
  color: #222222;
  padding: 30px 40px;
  position: relative;
  line-height: 48px;
  background-color: #ffffff;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 32px;
    width: 8px;
    border-radius: 0 8px 8px 0;
    background-color: @primary;
  }
}
</style>
